<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
  Card,
  Divider,
  Descriptions,
  DescriptionsItem,
  Image,
  Timeline,
  TimelineItem,
  Steps,
} from 'ant-design-vue';


</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">离岗告警</span>
          </div>
        </template>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-2 text-xl font-medium">告警信息</span>
        </div>
        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="告警ID ">123456789</DescriptionsItem>
          <DescriptionsItem label="离岗员工ID ">123456789</DescriptionsItem>
          <DescriptionsItem label="离岗员工姓名">张三三</DescriptionsItem>
          <DescriptionsItem label="员工工号">001</DescriptionsItem>
          <DescriptionsItem label="离岗时间">2023-01-01 10:00</DescriptionsItem>
          <DescriptionsItem label="离岗时长">2个小时</DescriptionsItem>
        </Descriptions>

        
      

      </Card>
    </div>
  </Page>
</template>
